<template>
  <div id="app">
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
    <div class="front" >
    <h1 align="left">账号信息</h1>
    <div class="userContent">
      <el-row
        style="width: 100%">
        <el-col :span="12">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item prop="username" label="用户名">
              <el-input v-model="form.username" maxlength="20">
              </el-input>
            </el-form-item>
            <el-form-item prop="email" label="邮箱">
              <el-input v-model="form.email" disabled></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="联系方式">
              <el-input v-model="form.phone" maxlength="20">
<!--                <el-button slot="suffix" style="margin-right: 0px;" @click="changePhone">更换</el-button>-->
              </el-input>
            </el-form-item>
            <el-form-item prop="status" label="账号状态">
              <el-input v-model="form.status" disabled></el-input>
            </el-form-item>
            <el-button  @click="change">保存修改</el-button>
            <el-button @click="TochangePassword">更换密码</el-button>
          </el-form>
        </el-col>
      </el-row><br>
    </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import router from '../../router'
export default {
  name: 'Information',
  data () {
    return {
      imgSrc: require('../../assets/Information.png'),
      form: {},
      f: 0
    }
  },
  methods: {
    changeUserName () {
      axios.post(`user/personal/resetName`, {
        newName: this.form.username
      }).then(res => {
        if (res.data.data.flag === 200) {
          this.f = 1
          // alert('修改成功1')
          alert(res.data.data.msg)
        } else {
          this.f = 0
          // alert('修改失败1')
          alert(res.data.data.msg)
        }
      }).catch(err => {
        alert(err)
        // router.replace('/login')
      })
    },
    change () {
      // eslint-disable-next-line no-unused-vars
      this.changeUserName()
      axios.post(`user/personal/resetPhone`, {
        phone: this.form.phone
      }).then(res => {
        if (res.data.status === 100) {
          alert(res.data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        router.replace('/index')
      })
    },
    TochangePassword () {
      return this.$router.push({
        path: 'ChangePassword'
      })
    },
    getInformation () {
      axios.get(`user/personal/detail`, {
        params: {}
      }).then(res => {
        if (res.data.status === 100) {
          this.form = res.data.data
        } else {
          alert('获取个人信息失败')
        }
      }).catch(err => {
        alert(err)
        router.replace('/login')
      })
    }
  },
  created () {
    this.getInformation()
  }
}
</script>

<style scoped>
.background{
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  z-index:-1;
  position: absolute;
}

.front{
  z-index:1;
  /*position: absolute;*/
  margin-top: 0px ;
  text-align: center;
}
</style>
